import { ref, watch } from 'vue';
import { BaseArray } from '@/types/global';
import packages from '@/service/packages';

interface MenuItem {
  label: string;
  key: string;
  children?: MenuItem[];
  includePaths?: BaseArray;
}
interface MenuMap {
  [propName: string]: MenuItem;
}

export const menuList = ref([] as MenuItem[]);

function genarator() {
  const menuMap: MenuMap = {};
  const list: MenuItem[] = [
    {
      label: '组件总览',
      key: '/list',
      includePaths: ['/list'],
    },
  ];
  Object.keys(packages).forEach((name) => {
    const pkg = packages[name];
    const pkgItem: MenuItem = {
      label: `${pkg.title}`,
      key: `/package/${name}`,
      includePaths: [`/package/${name}`],
    };
    if (menuMap[pkg.category]) {
      menuMap[pkg.category].children?.push(pkgItem);
    } else {
      const categoryItem: MenuItem = {
        label: pkg.category,
        key: pkg.category,
        children: [pkgItem],
      };
      menuMap[pkg.category] = categoryItem;
      list.push(categoryItem);
    }
  });
  menuList.value = list;
}

watch(packages, genarator);
